import React from 'react';
// import moment from 'moment';
import cn from 'classnames';
import { Popconfirm } from 'antd';
import styles from '@/pages/Recruitment/Interview/Record.less';
import { WebAudio } from '@/molecules';
import { getParse } from '@/pages/Recruitment/utils/';
import { formatTime } from '@/pages/Recruitment/Interview/utils/utils';

function QuestionRecItem({ l, i, item, index, onDeleteRecordTime, durationMSRef, recData, mixedRecordAndUploadState }) {
    const { isEqual } = item;
    const recordTimeInfo = recData.recordTimeInfo ? JSON.parse(recData.recordTimeInfo).endTime : 0; // 服务端返回录音的总时长
    return (
        <div key={l.startTime} className={styles.questionRecordDateItem}>
            <div className={styles.questionRecordDateItemWrap}>
                {!recData.recordUrl || mixedRecordAndUploadState === 1 ? (
                    <>
                        <i className="iconfont iconlistfunciton_soundclip_icon_default" />
                        {`${formatTime(l.startTime)} - ${l.endTime ? formatTime(l.endTime) : ''}`}
                    </>
                ) : (
                    <WebAudio
                        src={`${recData.recordUrl}#t=${getParse(
                            0,
                            durationMSRef.current || recordTimeInfo,
                            l?.startTime,
                            l?.endTime
                        )}`}
                        controls="controls"
                    />
                )}
                {isEqual ? (
                    <Popconfirm
                        getPopupContainer={trigger => trigger.parentNode}
                        title="确定删除此录音标记?"
                        onConfirm={() => {
                            onDeleteRecordTime(item, index, i);
                        }}
                    >
                        <i
                            style={{ marginLeft: '12px' }}
                            className={cn('iconfont iconDeleteIcon', styles.questionRecordDeleteIcon)}
                        />
                    </Popconfirm>
                ) : null}
            </div>
        </div>
    );
}

export default React.memo(QuestionRecItem);
